<template>
  <header class="header">
    <div class="left">
      <a-space align="center" @click="router.push('/home')">
        <img
          src="https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
          alt="logo"
        />
        <h1>闽南药膳库</h1>
      </a-space>
    </div>
    <ul class="right-side">
      <li>
        <a-tooltip title="搜索">
          <a-button shape="circle" :icon="h(SearchOutlined)" class="nav-btn" />
        </a-tooltip>
      </li>
      <li>
        <a-tooltip title="语言">
          <a-button shape="circle" :icon="h(FontColorsOutlined)" class="nav-btn" />
        </a-tooltip>
      </li>
      <li>
        <a-tooltip title="全屏">
          <a-button shape="circle" :icon="h(ExpandOutlined)" class="nav-btn" />
        </a-tooltip>
      </li>
      <li>
        <a-tooltip title="设置">
          <a-button shape="circle" :icon="h(SettingOutlined)" class="nav-btn" />
        </a-tooltip>
      </li>
      <li>
        <a-tooltip title="主题">
          <a-button shape="circle" :icon="h(SkinOutlined)" class="nav-btn" />
        </a-tooltip>
      </li>
      <!-- 临时 -->
      <li @click="gotoAdminPage" v-if="userStore.roles?.includes('admin' as any)">管理端</li>
      <li><Avatar /></li>
    </ul>
  </header>
</template>

<script setup lang="ts">
import { h } from "vue"
import { useRoute, useRouter } from "vue-router"
import { SearchOutlined, FontColorsOutlined, SkinOutlined, SettingOutlined, ExpandOutlined } from "@ant-design/icons-vue"
import { useUserStore } from "@/store"
import Avatar from "./avatar.vue"

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const gotoAdminPage = () => {
  if (route.path.startsWith("/admin")) return //已处在管理端
  router.push("/case/list")
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 56px;
  background: #fff;
  border: 1px solid rgb(229 230 235);

  h1 {
    font-size: 18px;
    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "PingFang SC",
      "Hiragino Sans GB",
      "noto sans",
      "Microsoft YaHei",
      "Helvetica Neue",
      Helvetica,
      Arial,
      sans-serif;
    color: rgb(29 33 41);
    font-weight: 500;
  }

  .right-side {
    display: flex;
    align-items: center;
    height: 100%;

    & > li {
      padding: 0 10px;

      .nav-btn {
        font-size: 14px;
        color: rgb(78 89 105);
        border-color: rgb(242 243 245);
      }
    }
  }
}
</style>
